<template>
    <el-header>
      <div class="nav-container">
        <div class="items">
          <router-link to="/" tag="el-menu-item" class="item">首页</router-link>
          <router-link to="/products" tag="el-menu-item" class="item">产品列表</router-link>
          <router-link to="/cart" tag="el-menu-item" class="item">购物车</router-link>
        </div>
      </div>
    </el-header>
  </template>
  
  <script>
  export default {
    name: 'Navbar'
  };
  </script>
  
  <style>
 /* Navbar整体样式优化 */
.el-header {
    background-color: #333; /* 改为深色背景，突出导航栏的重要性 */
    border-bottom: 1px solid #555; /* 边框颜色也相应加深，与背景搭配更协调 */
}

.nav-container {
    max-width: 1200px; /* 适当增加容器宽度，使导航栏看起来更舒展 */
    margin: 0 auto;
    display: flex;
    justify-content: space-between; /* 让菜单项均匀分布在导航栏两端，而不是居中 */
    align-items: center; /* 垂直居中菜单项 */
    height: 60px; /* 固定导航栏高度，使布局更规整 */
}

.items {
    background-color: transparent; /* 去掉之前的灰色背景，让背景与导航栏背景融为一体 */
    line-height: 60px;
    margin-left: 0; /* 去掉之前的左外边距，使菜单项从导航栏左侧开始排列 */
    display: flex; /* 将菜单项设置为弹性布局，方便后续调整间距等样式 */
}

.item {
    margin-left: 30px; /* 增加菜单项之间的间距 */
    color: #fff; /* 设置菜单项文字颜色为白色，与深色背景形成对比 */
    font-size: 18px; /* 适当增大字体大小，提高可读性 */
    transition: color 0.3s ease; /* 添加过渡效果，使鼠标悬停时颜色变化更平滑 */
}

.item:hover {
    color: #ccc; /* 鼠标悬停时菜单项文字颜色变为浅灰色 */
}

  </style>
  